<template>
    <div id="app">
        <div id="cover"> </div>
          <a-header></a-header>
          <!-- <todo></todo> -->
              <router-link to="/app/123">app123</router-link>
              <router-link to="/app/456">app456</router-link>
          <router-link to="/login">login</router-link>
          <transition name="fade">
            <router-view />
          </transition>
          <a-footer></a-footer>
    </div>
</template>
<script>
import AHeader from './layout/header.vue'
import AFooter from './layout/footer.jsx'
// import Todo from './views/todo/todo.vue'

export default {
  components: {
    AHeader,
    AFooter
    // Todo
  }
}
</script>

<style lang="stylus" scoped>
  #app {
        position absolute
        left 0
        right 0
        top 0
        bottom 0
    }

    #cover {
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        background-color #555
        opacity 0.5
        z-index -1
    }
</style>
